<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="../js/vue.js"></script>

</head>
<body>

<div id="div1">
    <div>所有员工</div>
    <ul>
        <li v-for="e in employees">{{e}}</li>   <!--将遍历的e放入 {{e}}-->
        <li v-for="(e,index) in employees">{{e+'+'+index}}</li>   <!--index表示当前元素的索引-->

        <li v-for="(depart,index) in departments">
            <!--显示部门的编号和部门的名称-->
            <span>部门编号：{{depart.id}}</span>
            <span>部门名称：{{depart.dname}}</span>
        </li>
    </ul>

</div>

<script>

    const vueObj = new Vue({
        el:'#div1',
        data: {
            employees: ['zhangsan', 'lisi', 'wangwu'],
            departments: [
                {
                    id: 1,
                    dname: '技术部',

                },
                {
                    id: 2,
                    dname: '采购部',
                },
                {
                    id: 3,
                    dname: '数据部',
                }

            ],



        },

    });
</script>
</body>
</html>